<div class="easyui-layout" data-options="fit:true">
    <!-- Begin of toolbar -->
    <div id="wu-toolbar-unit">
        <div class="wu-toolbar-button">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAddUnit()" plain="true">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEditUnit()" plain="true">修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeUnit()" plain="true">删除</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="reloadUnit()" plain="true">刷新</a>
        </div>
    </div>
    <!-- End of toolbar -->
    <table id="wu-datagrid-unit" class="easyui-datagrid" toolbar="#wu-toolbar-unit"></table>
</div>
<!-- Begin of easyui-dialog -->
<div id="wu-dialog-unit" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
    <form id="wu-form-unit" method="post">
        <table>
            <tr>
                <td width="60" align="right">用户名:</td>
                <td>
                    <input type="text" id="username" name="username" class="wu-text" />
                </td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <td>
                    <input type="password" id="password" name="password" class="wu-text" />
                </td>
            </tr>
            <tr>
                <td align="right">Email:</td>
                <td>
                    <input type="text" name="email" class="wu-text" />
                </td>
            </tr>
            <tr>
                <td align="right">QQ:</td>
                <td>
                    <input type="text" name="qq" class="wu-text" />
                </td>
            </tr>
            <tr>
                <td align="right">管理栏目:</td>
                <td>
                    <input id="cmbAgeType" class="easyui-combobox" style="width:268px" name=""  />
                </td>
            </tr>
            <tr>
                <td align="right">图片管理:</td>
                <td>
                    <input id="picCmbAgeType" class="easyui-combobox" style="width:268px" name=""  />
                </td>
            </tr>

            <!-- <tr>
                <td valign="top" align="right">栏目权限:</td>
                <td>
                    <select id="pm-select-lm" class="easyui-combobox" style="width:200px;" name="lmid" required="required"></select>
                </td>
            </tr> -->
            <input type="text" style="display:none" id="glmid" name="lmid">
            <input type="text" style="display:none" id="pictype" name="pic">
            <input type="text" style="display:none" name="id">
        </table>
    </form>
</div>
<!-- End of easyui-dialog -->
<script type="text/javascript">
    //初始化数据
    $.pic_fun_arr = [{
            id: 1,
            pictype: '图片新闻'
        }, {
            id: 2,
            pictype: '工作动态'
        },
        // {
        //     id: 3,
        //     title: '友情链接'
        // }, 
        {
            id: 4,
            pictype: '浮窗'
        }
    ];

    $.pic_fun_obj = {
        1: {
            id: 1,
            pictype: '图片新闻'
        },
        2: {
            id: 2,
            pictype: '工作动态'
        },
        // 3: {
        //     id: 3,
        //     title: '友情链接'
        // },
        4: {
            id: 4,
            pictype: '浮窗'
        }
    }
    // // 栏目下拉
    $.ajax({
        type: 'post',
        url: $.webConfig.apiUrl + 'lm/getlm',
        dataType: 'json',
        success: function (data) {
            if (data['return_code'] == 1) {
                $.lmData = data['return_body'];

                $('#pm-select-lm').combobox({
                    valueField: 'id',
                    textField: 'lm',
                    data: $.lmData,
                    multiple: true,
                    panelHeight: 'auto',
                    editable: false
                });

                var lmObj = {};
                $.each(data['return_body'], function (key, val) {
                    lmObj[val['id']] = val;
                })
                $.lmObj = lmObj;
            }
        },
        error: function (err) {
            console.log(err)
        }
    });

    /**
     * Name 添加记录
     */
    function addUnit() {
        console.log('添加记录')
        var username = $('#username').val()
        var password = $('#password').val()
        console.log(username, password)
        if (!username && !password) {

            $.messager.alert('信息提示', '请真确填写用户名或密码', 'info');

            return;
        }


        $('#glmid').val($.lmidarr.toString());
        $('#pictype').val($.pictypearr.toString());

        $('#wu-form-unit').form('submit', {
            url: $.webConfig.apiUrl + 'xsuser/addxsuser',
            success: function (data) {
                var data = JSON.parse(data);
                if (data['return_code'] == 1) {
                    $.messager.alert('信息提示', '提交成功！', 'info');
                    $('#wu-dialog-unit').dialog('close');
                    $('#wu-datagrid-unit').datagrid('reload');
                } else {
                    $.messager.alert('信息提示', '提交失败！', 'info');
                }
            }
        });
        // }, 0);

    }

    /**
     * Name 修改记录
     */
    function editUnit() {

        $('#glmid').val($.lmidarr.toString());
        $('#pictype').val($.pictypearr.toString());


        $('#wu-form-unit').form('submit', {
            url: $.webConfig.apiUrl + 'xsuser/updatexs',
            success: function (data) {
                var data = JSON.parse(data);
                if (data) {
                    $.messager.alert('信息提示', '提交成功！', 'info');
                    $('#wu-dialog-unit').dialog('close');
                    $('#wu-datagrid-unit').datagrid('reload');
                } else {
                    $.messager.alert('信息提示', '提交失败！', 'info');
                }
            }
        });
        // }, 0);

    }

    /**
     * Name 删除记录
     */
    function removeUnit() {
        var items = $('#wu-datagrid-unit').datagrid('getSelections');
        if (items.length == 0) {
            $.messager.alert('信息提示', '你没选中哦...', 'info');
            return;
        }
        $.messager.confirm('信息提示', '确定要删除该记录？', function (result) {
            if (result) {
                var items = $('#wu-datagrid-unit').datagrid('getSelections');
                var ids = [];
                $(items).each(function () {
                    ids.push(this.id);
                });

                if (ids == 0) {
                    $.messager.alert('信息提示', '你没选中哦...', 'info');
                    return;
                }

                //alert(ids);return;
                $.ajax({
                    url: $.webConfig.apiUrl + 'xsuser/delxs',
                    type: 'post',
                    data: {
                        id: ids[0]
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data['return_code'] == 1) {
                            $.messager.alert('信息提示', '删除成功！', 'info');
                            $('#wu-datagrid-unit').datagrid('reload');
                        } else {
                            $.messager.alert('信息提示', '删除失败！', 'info');
                        }
                    }
                });
            }
        });
    }

    /**
     * Name 打开添加窗口
     */

    function openAddUnit() {
        console.log('打开添加窗口')
        $.lmidarr = [];
        $.pictypearr = [];

        $('#wu-form-unit').form('clear');
        $('#cmbAgeType').combobox({
            data: $.lmData,
            valueField: 'id', //绑定字段ID
            textField: 'lm', //绑定字段Name
            panelHeight: 200, //自适应
            multiple: true,

            // onShowPanel: function () {
            //     var opts = $(this).combobox('options');
            //     var target = this;
            //     var values = $(target).combobox('getValues');
            //     $.map(values, function (value) {
            //         var el = opts.finder.getEl(target, value);
            //         el.find('input.combobox-checkbox')._propAttr('checked', true);
            //     })
            // },
            // onLoadSuccess: function () {
            //     var opts = $(this).combobox('options');
            //     var target = this;
            //     var values = $(target).combobox('getValues');
            //     $.map(values, function (value) {
            //         var el = opts.finder.getEl(target, value);
            //         el.find('input.combobox-checkbox')._propAttr('checked', true);
            //     })
            // },


            onSelect: function (row) {
                console.log(row)
                $.lmidarr.push(row['id']);

            },
            onUnselect: function (row) {
                for (var i = 0; i < $.lmidarr.length; i++) {
                    if ($.lmidarr[i] == row['id'])
                        $.lmidarr.splice(i, 1);
                }

            }
        });

        $('#picCmbAgeType').combobox({
            data: $.pic_fun_arr,
            valueField: 'id', //绑定字段ID
            textField: 'pictype', //绑定字段Name
            panelHeight: 200, //自适应
            multiple: true,

            onSelect: function (row) {
                console.log(row)
                $.pictypearr.push(row['id']);

            },
            onUnselect: function (row) {
                for (var i = 0; i < $.pictypearr.length; i++) {
                    if ($.pictypearr[i] == row['id'])
                        $.pictypearr.splice(i, 1);
                }

            }
        });



        $('#wu-dialog-unit').dialog({
            closed: false,
            modal: true,
            title: "添加信息",
            cache: false,
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: addUnit
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#wu-dialog-unit').dialog('close');
                }
            }]
        });

    }

    /**
     * Name 打开修改窗口
     */
    function openEditUnit() {

        $.lmidarr = [];
        $.pictypearr = [];

        $('#wu-form-unit').form('clear');
        var item = $('#wu-datagrid-unit').datagrid('getSelected');

        if (!item) {
            $.messager.alert('信息提示', '你没选中哦...', 'info');
            return;
        }
        $('#wu-form-unit').form('load', item);

        $('#cmbAgeType').combobox({
            data: $.lmData,
            valueField: 'id', //绑定字段ID
            textField: 'lm', //绑定字段Name
            panelHeight: 200, //自适应
            multiple: true,

            onSelect: function (row) {
                console.log(row)
                $.lmidarr.push(row['id']);

            },
            onUnselect: function (row) {
                for (var i = 0; i < $.lmidarr.length; i++) {
                    if ($.lmidarr[i] == row['id'])
                        $.lmidarr.splice(i, 1);
                }

            }
        });

        $('#picCmbAgeType').combobox({
            data: $.pic_fun_arr,
            valueField: 'id', //绑定字段ID
            textField: 'pictype', //绑定字段Name
            panelHeight: 200, //自适应
            multiple: true,

            onSelect: function (row) {
                console.log(row)
                $.pictypearr.push(row['id']);

            },
            onUnselect: function (row) {

                for (var i = 0; i < $.pictypearr.length; i++) {
                    if ($.pictypearr[i] == row['id'])
                        $.pictypearr.splice(i, 1);
                }
            }
        });


        $('#wu-dialog-unit').dialog({
            closed: false,
            modal: true,
            title: "修改信息",
            cache: false,
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: editUnit
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#wu-dialog-unit').dialog('close');
                }
            }]
        });
    }

    /**
     * Name 分页过滤器
     */
    function pagerFilter(data) {
        var pageData = {
            total: 18,
            rows: []
        };

        if (data['return_code'] == 1) {
            pageData['total'] = data['return_count'];
            pageData['rows'] = data['return_body'];
        }

        return pageData;
    }




    // 刷新页面
    function reloadUnit() {
        $('#wu-datagrid-unit').datagrid('reload');
    }


    /**
     * Name 载入数据
     */
    $('#wu-datagrid-unit').datagrid({
        url: $.webConfig.apiUrl + 'xsuser/getxs',
        loadFilter: pagerFilter,
        rownumbers: true,
        singleSelect: true,
        pageSize: 20,
        pagination: true,
        multiSort: false,
        fitColumns: true,
        fit: true,
        columns: [
            [{
                    checkbox: true
                },
                {
                    field: 'id',
                    title: 'id',
                    width: 50,
                    sortable: true
                },
                {
                    field: 'username',
                    title: '用户名',
                    width: 180,
                    sortable: true
                },
                {
                    field: 'password',
                    title: '密码',
                    width: 180,
                    sortable: true
                },
                {
                    field: 'lmid',
                    title: '管理栏目',
                    width: 400,
                    sortable: true,
                    formatter: function (value, row, index) {
                        if (value == null) {
                            return "";
                        } else if (value == 'null') {
                            return "";
                        } else {
                            return value;
                        }
                    }
                },
                {
                    field: 'pic',
                    title: '图片管理',
                    width: 200,
                    sortable: true,
                    formatter: function (value, row, index) {
                        if (value == null) {
                            return "没有权限";
                        } else if (value == 'null') {
                            return "没有权限";
                        } else if (value == '') {
                            return "没有权限";
                        } else {
                            var arr = value.split(",");
                            var str = ""
                            console.log(arr)
                            for (var i = 0; i < arr.length; i++) {
                                if ($.pic_fun_obj[arr[i]]) {

                                    str += $.pic_fun_obj[arr[i]]['pictype'] + " "

                                }
                            }
                            // console.log(str);
                            return str;
                        }
                    }
                },
                {
                    field: 'email',
                    title: 'Email',
                    width: 180,
                    sortable: true
                },
                {
                    field: 'qq',
                    title: '电话',
                    width: 180,
                    sortable: true
                },
                {
                    field: 'regtimeToString',
                    title: '创建时间',
                    width: 180,
                    sortable: true
                },
                {
                    field: 'logintimeToString',
                    title: '登陆时间',
                    width: 180,
                    sortable: true
                },
                {
                    field: 'loginIP',
                    title: '登陆IP',
                    width: 180,
                    sortable: true
                },


                // {
                //     field: 'lmid',
                //     title: '栏目权限',
                //     width: 210,
                //     formatter: function (value, row, index) {
                //         var lmstr = '';
                //         if (typeof (value) == 'string' && value.split(',').length > 0) {
                //             $.each(value.split(','), function (key, val) {
                //                 if (val && $.lmObj[val] && $.lmObj[val]['lm']) {
                //                     lmstr = lmstr + $.lmObj[val]['lm'] + ',';
                //                 }
                //             })
                //             return lmstr;
                //         } else {
                //             return value;
                //         }
                //     }
                // },
                // {
                //     field: 'dj',
                //     title: '用户权限',
                //     width: 100,
                //     formatter: function (value, row, index) {
                //         if (admin_obj[value]) {
                //             return admin_obj[value]['title'];
                //         } else {
                //             return value;
                //         }

                //     }
                // }
            ]
        ]
    });
</script>